<template>
<div style="height: 800px;overflow:auto">
  <div   v-for="(item,index) in videos" :key="index"   class="videos">
    <div class="player-container" STYLE="height:160px;width: 260px;">
      <VideoShow :src=item.videoaddr  ></VideoShow>
<!--      videoWidth=500px videoHegiht=500px-->
    </div>
    <p class="Text"><b>{{item.videotitle}}</b></p>
    <div style="text-align: center;">
    <span style="color: cornflowerblue">{{ item.audit }}</span>
    <span style="color: #B3C0D1;font-size: 15px">&nbsp;&nbsp;{{item.createtime }}</span>
    </div>
    <div style="text-align: center;">
    <span style="color: #888888;font-size: 13px"> 收<i class="el-icon-star-on"></i>藏：2345</span>&nbsp;&nbsp;
      <router-link :to="{path:'/videorevise',query:{videoid:item.videoId}}" style="text-decoration: none;" >
        <span class="bainji"><i class="el-icon-edit"></i>编辑</span>&nbsp;
      </router-link>
    <span class="shanchu" @click="revise(item.videoId)"><i class="el-icon-delete"></i>删除</span>
    </div>
  </div>
</div>
</template>

<script>
import VideoShow from "../video/VideoShow";
export default {
  name: "myvideo",
  components:{
    VideoShow:VideoShow
  },
  data(){
    return {
      videos: [],
    }
  },
  methods:{
    revise(id) {
      this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var url="/video?idList="+id;
        this.$axios.delete(url)
          .then( (res)=> {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.indexs();
            //  function myMessage() {
            // location.reload(true);
            //  }
            //  setTimeout(myMessage, 500);

          }).catch(function (error) {
          console.log(error);
        } );
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

      // this.$router.push({name:'/videorevise',query: {videoid:item.createtime}});
    },
    indexs:function() {
      var id=sessionStorage.getItem("userId");
      var url = '/video/selectByuserId/'+id;
      this.$axios.post(url)
        .then( (res)=> {
          this.videos=[];
            for (var i = 0; i < res.data.data.length; i++) {
              let row = {} // 定义一个当前添加数据的行
              row.videoId=res.data.data[i].id;
              row.videotitle= res.data.data[i].videotitle;
              row.createtime=res.data.data[i].createtime;
              row.videoaddr=res.data.data[i].videoaddr;
              row.brief=res.data.data[i].brief;
              if(res.data.data[i].audit===0)
                row.audit="审核中";
              else if(res.data.data[i].audit===1)
                row.audit="发布成功";
              else row.audit="发布失败";
              this.videos.push(row);
            }
        }).catch(function (error) {
        console.log(error);
      } );
    },
  },
  created() {
  //自动加载indexs方法
  this.indexs();
  }
}
</script>

<style scoped>
.videos{
  height: 180px;
  width: 260px;
  /*border-style: solid;*/
  float: left;
  padding-left: 26px;
  margin-top: 10px;
  margin-bottom: 40px;
  background-color: rgb(255,255,255);
}
p.Text {
  /* 设置固定的宽度 */
  /*width: 400px;*/
  font-size:17px ;
  /* 裁剪多余的 */
  overflow: hidden;
  /* 多余的以省略号出现 */
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制再一个块元素再文本显示的行数 */
  -webkit-line-clamp: 1;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  text-align: center;
}
.bainji{
  color: #888888;
  font-size: 15px;
  cursor:pointer;
}
.bainji:hover{
  color: cornflowerblue;
}
.shanchu{
  color: #888888;
  font-size: 15px;
  cursor:pointer;
}
.shanchu:hover{
  color: red;
}
</style>
